<template>
	<view class="container">
		<view style="padding: 10px;"></view>
		<view v-for="(item, idx) in gongziList" :key="idx" style="padding-bottom: 10px;">
			<view class="card" @click="toDetail(idx)">
				<view class="card-title">
					<b>{{item.yuefen}} 工资单</b>
				</view>
				<view class="card-body">
					<uni-row>
						<uni-col :span="12">应发工资：</uni-col>
						<uni-col :span="12" style="text-align: right;"><i style="color: indianred;">{{item.yingfagongzi}}元</i></uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">实发工资：</uni-col>
						<uni-col :span="12" style="text-align: right;"><i style="color: royalblue;">{{item.shifagongzi}}元</i></uni-col>
					</uni-row>
					<!-- {{item}} -->
				
				</view>
			</view>
		</view>

		<uni-load-more :status="moreStatus"></uni-load-more>
	</view>
</template>

<script>

	import { websock } from '../../net/websock'

	export default {
		data() {
			return {
				moreStatus: 'more',
				gongziList: []
			}
		},
		onReady() {
			this.getOlderRecord()
		},
		// 下拉刷新，获取最新的数据
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.getNewestRecord()
		},
		// 上拉刷新，获取历史数据
		onReachBottom() {
			console.log('onReachBottom')
			this.getOlderRecord()
		},
		methods: {
			// 获取最新的通知
			async getNewestRecord() {
				try{
					if (this.gongziList.length == 0) {
						let res = await websock.gongziRecord({pageCount: 10})
						console.log('getRecordList list empty', res)
						uni.stopPullDownRefresh()
						this.gongziList = [...res, ...this.gongziList]
					} else {
						let res = await websock.gongziRecord({greaterThan: this.gongziList[0].id,pageCount: 10})
						console.log('getRecordList list not empty', res)
						uni.stopPullDownRefresh()
						this.gongziList = [...res, ...this.gongziList]
					}
				}catch(e){
					uni.showToast({title: e.message})
				}
			},
			// 获取老的数据
			async getOlderRecord() {
				this.moreStatus = 'loading'
				try{
					if (this.gongziList.length == 0) {
						console.log('before get list empty')
						let res = await websock.gongziRecord({pageCount: 10})
						console.log('getOlderRecord list empty', res)
						this.gongziList = [...this.gongziList, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					} else {
						console.log('before get list not empty')
						let res = await websock.gongziRecord({lessThan: this.gongziList[this.gongziList.length - 1].id,pageCount: 10})
						console.log('getOlderRecord list not empty', res)
						this.gongziList = [...this.gongziList, ...res]
						if (res.length < 10) {
							this.moreStatus = 'noMore'
						} else {
							this.moreStatus = 'more'
						}
					}
				}catch(e){
					uni.showToast({title: e.message})
				}
			},
			toDetail(idx) {
				uni.navigateTo({url: `/pages/renshi/gongzidanDetail?detail=${JSON.stringify(this.gongziList[idx])}`})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px 10px 20px 10px;
		line-height: 24px;
		background-image: url(/static/login/bg.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}



	.text-r {
		font-weight: bold;
		font-size: 15px;
		color: indianred;
		text-align: right;
	}
	.card {
		border: 1px solid #e6e6e6;
		border-radius: 10px;
		background-color: white;
		font-size: 14px;
		padding: 10px 20px 10px 20px;
	}
	
	.card-title {
		border-bottom: 1px #DCDCDC solid;
		padding-bottom: 5px;
		border-bottom: 1px #DCDCDC solid;
	}
	
	.card-body {
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.card-footer {
		padding-top: 15px;
		text-align: right;
	}
</style>
